<template>
  <div>
    <el-upload
      action="#"
      list-type="picture-card"
      :auto-upload="false"
      :file-list="fileList"
      :on-remove="onRemove"
      :on-preview="onPreview"
      :on-change="onChange"
      :class="{ hidden: fileComputed }"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <!-- 预览图片 -->
    <!-- <el-dialog :visible.sync="dialogVisible">
        <img style="width: 100%" :src="formData.subject_icon" alt="" />
      </el-dialog> -->
    <span class="suggest">建议尺寸：200*200</span>
  </div>
</template>

<script>
import { getPicture } from "@/api/permission";
export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      formImgData: {},
      imgUrl: "",
      fileList: [],
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      url: "",
    };
  },
  computed: {
    fileComputed() {
      return this.fileList.length === 1;
    },
    showText() {
      return this.formData.id ? "修改" : "添加";
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    //  预览图标
    onPreview(file) {
      this.imgUrl = file.url;
      this.dialogVisible = true;
    },
    //  改变图标时
    async onChange(file, fileList) {
      this.fileList = fileList.map((item) => item);
      this.formImgData = new FileReader();

      //  reader= reader.readAsDataURL(file);
      console.log(file);
      this.formImgData = {
        file: file.url,
        filename: file.name,
      };
      const data = await getPicture(this.formImgData);
      this.url = data.url;
      // console.log(this.url);
      this.$emit("tupain", this.url);
    },
    onRemove(file, fileList) {
      console.log(file, fileList);
    },
  },
};
</script>
<style lang="less" scoped></style>
